<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todoList练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .edit {
            display: block;
            width: 80%;
            height: 35px;
            line-height: 35px;
            margin: 30px auto;
            box-sizing: border-box;
            padding-left: 4px;
            border-radius: 4px;
            border: 1px solid #ccc;
            outline: 0;
            box-shadow: 0 0 5px #ccc;
        }

        .list {
            margin: 0 auto;
            width: 80%;
        }

        .unit {
            position: relative;
            padding: 10px 0;
            border-bottom: 1px solid #efefef;
        }

        .unit:last-child {
            border-bottom: 0;
        }

        .finish {
            text-decoration: line-through;
            color: #ccc;
        }

        .del {
            background: red;
            text-decoration: none;
            position: absolute;
            right: 0;
            font-size: 12px;
            border: 0;
            outline: 0;
            padding: 2px 5px;
            border-radius: 5px;
            color: #fff;
        }

        .empty {
            font-size: 13px;
            color: #ccc;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <input class="edit" @keydown.enter="addTask" type="text" v-model="task.content" placeholder="编写任务">
        <div class="list">
            <div class="unit" v-for="(item,index) in list">
                <input @click="changeState(index)" :checked="item.finished" type="checkbox">
                <span :class="{'finish':item.finished}">{{item.content}}</span>
                <button @click="removeTask(index)" class="del">删除</button>
            </div>
        </div>
        <p class="empty" v-if="list.length === 0">暂无任务</p>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                task: {
                    content: '',//内容
                    finished: false,//未完成
                    delete: false//未删除
                },
                list: [],
            },
            methods: {
                addTask: function () {
                    console.log(this.task.content)
                    this.list.push(this.task)
                    this.task = {
                        content: '',//内容
                        finished: false,//未完成
                        delete: false//未删除
                    }
                },
                changeState: function (index) {
                    let curState = this.list[index].finished;
                    this.list[index].finished = !curState
                },
                removeTask: function (index) {
                    this.list.splice(index, 1)
                }
            },

        })
    </script>
</body>

</html>